<template>
    <page class="boxoffice">
        <page-header>票房</page-header>
        <b-scroll :pullDownRefresh="true" @pullingDown="refreshData">
            <div class="content" v-if="boxOfficeInfo">
                <div class="top">
                    <div class="top1">
                        {{boxOfficeInfo.queryDate}} 今天大盘：<span>{{boxOfficeInfo.splitTotalBox}}万</span>
                    </div>
                    <div class="top2">
                        每30分钟更新一次，可下拉手动刷新
                    </div>
                </div>
                <div class="row title">
                    <div class="col">片名</div>
                    <div class="col" style="flex-direction:column"><span>实时票房</span><span>(万元)</span></div>
                    <div class="col">票房占比</div>
                    <div class="col">排片占比</div>
                    <div class="col">上座率</div>
                </div>
                <div class="row" v-for="(item,index) in boxOfficeInfo.list" :key="index">
                    <div class="col">
                        <div class="mn">{{item.movieName}}</div>
                        <div>{{item.releaseInfo}} {{item.splitSumBoxInfo}}</div>
                    </div>
                    <div class="col money">{{item.boxInfo}}</div>
                    <div class="col">{{item.boxRate}}</div>
                    <div class="col">{{item.showRate}}</div>
                    <div class="col">{{item.avgSeatView}}</div>
                </div>
            </div>
        </b-scroll>
    </page>
</template>

<script>
    import BScroll from "../components/BScroll.vue";
    export default {
        name: "boxoffice",
        data() {
            return {
                boxOfficeInfo: null
            }
        },
        async created() {
            this.showLoading("正在加载");
            await this.getBoxOfficeInfo();
            this.hideLoading();
            setInterval(async () => {
                this.showLoading("正在刷新");
                await this.getBoxOfficeInfo();
                this.hideLoading();
            }, 1000*60*30);
        },
        methods: {
            getBoxOfficeInfo() {
                //异步转同步
                return new Promise((resolve,reject)=>{
                    this.$http.get("/maoyanApi/box/promovie/api/box/second.json").then(res => {
                        this.boxOfficeInfo = res.data.data;
                        resolve();
                    }).catch(err => {
                        console.log(err);
                        reject();
                    });
                })
                
            },
            async refreshData(scroll){
                this.showLoading("正在刷新");
                await this.getBoxOfficeInfo();
                this.hideLoading();
                scroll.finishPullDown();
                scroll.refresh();

            }
        },
        components: {
            BScroll
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/comm.scss";

    .boxoffice {
        @include flexbox(column);

        .content {
            flex: 1;
            overflow: auto;

            .top {
                box-sizing: border-box;
                padding: .2rem;

                .top1 {
                    span {
                        color: #ff0000;
                    }
                }

                .top2 {
                    color: #999999;
                    font-size: .28rem;
                }
            }

            .row {
                @include flexbox();
                min-height: 1rem;

                &.title {
                    background-color: rgba(255, 0, 0, .6);
                    color: #ffffff;
                }

                .col {
                    * {
                        font-size: .24rem;
                    }

                    flex: 1;
                    @include flexbox();
                    justify-content: center;
                    align-items: center;
                    font-size: .24rem;

                    span {
                        font-size: inherit;
                    }

                    &.money {
                        color: red;
                    }
                }

                .col:first-child {
                    flex-direction: column;
                    min-width: 1.9rem;
                    text-align: center;
                }
            }

            .row:nth-child(odd) {
                background-color: rgb(242, 242, 242);
            }
        }
    }
</style>